<template>
    <div class="sign">
        <div class="sign-header">
            <router-link tag="b" to="/sign" class="icon">&lt;</router-link>
            <span>帮助</span>
        </div>
        <div class="sign-content">
            <div class="des">
                <h2>请输入验证码</h2>
                <p>验证码已通过短信发送至+86 13819918879</p>
            </div>
            <div class="sign-box">
                <div class="inp">
                    <input @input="changeCode" v-model="code" type="text" class="inp-controll" placeholder="请输入手机号码">
                </div>
                <div class="sele">
                    {{time}}
                </div>
            </div>
            <div class="code-btn">
                <button :disabled="disabled" @click="login" :class="[btnBg?'active':'']" class="load-btn">
                    <div class="loads"></div>
                    登录
                </button>
                <button :disabled="disableds" @click="timeagain" :class="[btnBgs?'active':'']">重新获取验证码</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                telErea: "",
                time: 60,
                code: '',
                disabled: true,
                btnBg: false,
                disableds: true,
                btnBgs: false
            }
        },
        created() {
            this.getCode()
        },
        methods: {
            getCode() {
                this.timer();
                this.codes = '517520'
            },
            login() {
                if (this.code == this.codes) {
                    this.$router.push("/me");
                } else {
                    alert("登录失败")
                }
            },
            changeCode(e) {
                this.code = e.target.value;
                if (this.code == this.codes) {
                    this.disabled = false;
                    this.btnBg = true;
                } else {
                    this.disabled = false;
                    this.btnBg = true;
                }
            },
            timer() {
                if (this.time > 0) {
                    this.disableds=true;
                    this.btnBgs = false;
                    this.time--;
                    setTimeout(this.timer, 1000);
                } else {
                    this.disableds=false;
                    this.btnBgs = true;
                }
            },
            timeagain(){
                this.time=60;
                this.timer();
            }

        }
    }
</script>

<style>
    .sign {
        padding: 30px;
    }

    .sign-header {
        display: flex;
        justify-content: space-between;
    }

    .sign-header .icon {
        font-size: 30px;
    }

    .sign-content {
        padding: 40px 10px;
    }

    .des h2 {
        font-size: 24px;
        font-weight: bold;
    }

    .des p {
        line-height: 40px;
        font-size: 14px;
        color: #999;
    }

    .not-sign p {
        line-height: 40px;
        color: #666;
    }

    .not-sign p a {
        color: #628DB8;
        padding: 0 5px;
    }

    .sign-box {
        display: flex;
        height: 50px;
        align-items: center;
        background-color: #f9f9f9;
        margin: 20px 0;
        justify-content: space-between;
    }

    .sele {
        margin-right: 20px;
        color: #ccc;
    }

    .inp-controll {
        height: 36px;
        background-color: #f9f9f9;
        border: none;
        width: 90%;
        margin-left: 10px;
        outline: medium;
    }

    input {
        caret-color: #fe2c55
    }

    input::-webkit-input-placeholder {
        color: #ccc;
    }

    .not-sign p {
        color: #ccc;
        font-size: 14px;
        margin-top: 10px;
    }

    .code-btn button {
        margin: 20px 0;
        width: 100%;
        padding: 15px 0;
        border: none;
        color: #f9f9f9;
    }

    .other a {
        color: #628DB8;
        font-size: 13px;
    }

    .other a:nth-child(1) {
        color: #666;
    }

    .code-btn .active {
        color: #ffffff;
        background-color: #FE2c55;
    }

    .load-btn {
        display: flex;
        justify-content: center;
    }

    .loads {
        width: 14px;
        height: 14px;
        border: 3px solid #fff;
        border-bottom: 3px #ccc solid;
        border-radius: 50%;
        animation: load 1s infinite linear;
        margin-right: 5px;
    }

    @keyframes load {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>